跳到主要内容

泡泡效果着色器的实现

这个案例我们讲一点好玩的，来简单实现一个吹泡泡的泡泡效果。

bubble_effect

这个案例中会涉及一些计算，这里并不会详细解释为何要这么算，只会说明每一个函数的作用。

设置​

该案例依旧使用一个空场景进行创建，创建方式与visualshader案例一样，只不过需要创建shader而不是visualshader：

bubble_shader_create

编写着色器​

首先我们需要指定着色器类型以及添加一些丰富效果可修改属性：

shader_type spatial;

uniform float flutter_speed = 1.5; //表示泡泡不规则运动的频率
uniform float flutter_size = 0.05; //表示泡泡不规则飘动的幅度大小

uniform vec4 outline_color : hint_color = vec4( 0.45, 0.70, 1.0, 0.5 ); //泡泡外边框颜色
uniform float noise_speed = 0.2;  //泡泡颜色渐变的速度

这些添加的属性都可以在属性面板的Shader Param中看见，并且你可以直接修改。

shader_param

下一步，我们需要封装一个hsv转rgb的方法，具体作用就是将hsv色彩空间转化为rgb色彩空间，关于色彩空间的相关知识在这里不做讲解：

vec3 hsv2rgb( float h, float s, float v )
{
    return (
        (
            clamp(
                abs( fract( h + vec3( 0.0, 2.0, 1.0 ) / 3.0 ) * 6.0 - 3.0 ) - 1.0
            ,   0.0
            ,   1.0
            ) - 1.0
        ) * s + 1.0
    ) * v;
}

然后，我们需要在vertex里面修改顶点数据，通过修改顶点数据来实现泡泡自身的飘动效果，动态的效果通过引入TIME属性来实现：

void vertex( )
{
    vec3 v = clamp( cos( VERTEX * 10.0 + vec3( TIME * flutter_speed ) ) + vec3( 1.0 ), 0.0, 1.0 );
    VERTEX *= 1.0 + dot( v, v ) * flutter_size * 0.5;
}

最后在片段函数中来设置泡泡的颜色以及透明度，使用clamp方法将透明度限制在0.0-1.0的范围内，并使用mix方法得到平滑的颜色渐变效果，动态效果依旧通过引入TIME属性来实现：

void fragment( )
{
    float outline_alpha = clamp( ( 1.0 - dot( NORMAL, VIEW ) ) , 0.0, 1.0 );
    vec3 color = hsv2rgb( outline_alpha - 1.5 + noise_speed * TIME, 1.0, 1.0 );

    ALBEDO = mix( color, outline_color.rgb, max( outline_alpha - 0.3, 0.0 ) );
    ALPHA = outline_color.a * outline_alpha;
}

最后，我们可以在场景中添加一个定向光，这样可以更清晰的看到泡泡的效果：

bubble_final_effect

tip

你也可以通过修改Shader Param下的属性得到各种效果，也可以自己定义额外的属性。Shader Param中的属性还可以和动画播放器结合，这样可以实现更加动态，更加丰富的效果。